<template>
	<view class="menu-wrapper">
		<view class="menu-toggle-button"></view>
		<view class="menu-items">
			<view class="menu-item" style="transform: rotate(120deg);">
				<view class="menu-item-button" style="transform: translate3d(0px, 0px, 0px);"></view>
				<view class="menu-item-bounce" style="transform: translate3d(0px, 0px, 0px); transform-origin: 50% 50% 0px;"></view>
			</view>
			<view class="menu-item" style="transform: rotate(180deg);">
				<view class="menu-item-button" style="transform: translate3d(0px, 0px, 0px);"></view>
				<view class="menu-item-bounce" style="transform: translate3d(0px, 0px, 0px); transform-origin: 50% 50% 0px;"></view>
			</view>
			<view class="menu-item" style="transform: rotate(240deg);">
				<view class="menu-item-button" style="transform: translate3d(0px, 0px, 0px);"></view>
				<view class="menu-item-bounce" style="transform: translate3d(0px, 0px, 0px); transform-origin: 50% 50% 0px;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'WheelFab',
		props: {
			pattern: {
				type: Object,
				default () {
					return {}
				}
			},
			horizontal: {
				type: String,
				default: 'left'
			},
			vertical: {
				type: String,
				default: 'bottom'
			},
			direction: {
				type: String,
				default: 'horizontal'
			},
			content: {
				type: Array,
				default () {
					return []
				}
			},
			show: {
				type: Boolean,
				default: false
			},
			btnColor:{
				type:String,
				default:'#3c3e49'
			}
		},
		data() {
			return {
				fabShow: false,
				flug: true,
				isShow: false,
				styles: {
					color: '#3c3e49',
					selectedColor: '#007AFF',
					backgroundColor: '#fff',
					buttonColor: '#3c3e49'
				}
			}
		},
		computed: {
			// 计算左下位置
			leftBottom() {
				return this.getPosition(0, 'left', 'bottom')
			},
			// 计算右下位置
			rightBottom() {
				return this.getPosition(0, 'right', 'bottom')
			},
			// 计算左上位置
			leftTop() {
				return this.getPosition(0, 'left', 'top')
			},
			rightTop() {
				return this.getPosition(0, 'right', 'top')
			}
		},
		created() {
			this.isShow = this.show
			if (this.top === 0) {
				this.fabShow = true
			}
			// 初始化样式
			this.styles = Object.assign({}, this.styles, this.pattern)
		},
		methods: {
			_onClick() {
				this.isShow = !this.isShow
			},
			open() {
				this.isShow = true
			},
			close() {
				this.isShow = false
			},
			/**
			 * 按钮点击事件
			 */
			_onItemClick(index, item) {
				this.$emit('trigger', {
					index,
					item
				})
			},
			/**
			 * 获取 位置信息
			 */
			getPosition(types, paramA, paramB) {
				if (types === 0) {
					return this.horizontal === paramA && this.vertical === paramB
				} else if (types === 1) {
					return this.direction === paramA && this.vertical === paramB
				} else if (types === 2) {
					return this.direction === paramA && this.horizontal === paramB
				} else {
					return this.isShow && this.direction === paramA ? this.contentWidth : this.contentWidthMin
				}
			}
		}
	}
</script>

<style>
	.menu-wrapper {
	    position: absolute;
	    left: 50%;
	    bottom: 10rpx;
	}
	.menu-toggle-button {
	    background: transparent;
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	.menu-toggle-button,.menu-item-button,.menu-item-bounce{
		background: #4f4f64;
		border-radius: 50%;
		width: 80px;
		height: 80px;
		margin-left: -40px;
		margin-top: -40px;
		height: 80px;
		color: #fff;
		border: none;
		outline: none;
		position: relative;
	}
	.menu-items{
		list-style-type: none;
		padding: 0;
		margin: 0;
		position: absolute;
		left: 0;
		top: 0;
	}
	.menu-item{
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
	}
	.menu-item-button{
		width: 60rpx;
		height: 60rpx;
		margin-left: -30rpx;
		margin-top: -30rpx;
		position: absolute;
		top: 0;
		left: 0;
		color: #AD4C4C;
	}
	.menu-item-bounce{
		position: absolute;
		top: 0;
		left: 0;
	}
</style>
